<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div>
        <p> 名字是： {{ name }} </p>
        <p> 年龄是： {{ age }} </p>
    </div>



    <input type="text">

    

    <script>


        function fn(options) {
            const {el , data} = options ;
            const root = document.querySelector(el) ;

            if(!root)  throw new Error('标签不存在') ;
            if(data.constructor !== Object) throw new Error('data数据必须是对象');

            let rootStr = root.innerHTML ;

            // 复刻数据
            const _data = {} ;

            for(let prop in data) {
                Object.defineProperty(_data , prop , {
                    get() {
                        return data[prop]
                    } ,
                    set(v) {
                        data[prop] = v ;
                        render(rootStr , _data , root);
                    }
                })
            }

            render(rootStr , _data , root);

            return _data ;

        }


        function render(rootStr , _data , root) {
            const reg = /{{ *(\w+) *}}/g ;   // 全局匹配
            // 找到使用了双大括的所有内容
            const arr = rootStr.match(reg) ;
            // 替换这部分内容
            arr.forEach(item => {
                // 找到属性
                const prop = reg.exec(rootStr)[1] ;
                rootStr = rootStr.replace(/{{ *(\w+) *}}/ , _data[prop]) ;
            })
            // 
            root.innerHTML = rootStr ;
        }


        
        const res = fn({
            el : 'div' ,
            data : {
                name : 'cc' ,
                age : 20 
            }
        })


        const oInp = document.querySelector('input') ;
        oInp.oninput = function() {
            res.name = this.value ;
        }

    </script>
    
</body>
</html>